<template>
	<view class="position-relative">
		<!-- 轮播图组件不需要直接使用插槽 -->
		<slot></slot>
		<view v-if="show" class="flex align-center text-white px-2 pb-1 rounded" style="position: absolute; bottom: 0; left: 0; right: 0; 
					background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.8));">
			<view style="width: 80%;" class="text-ellipsis">
				<!-- 获取当前指示点的位置，获取对应的title -->
				<text>{{info[current].Carousel_Chart_Name}}</text>
			</view>
			<view style="width: 20%;" class="flex align-center justify-end flex-shrink">
				<!-- 指示点选中当前图片为白色 未选中为灰色 -->
				<view v-for="(item,index) in info" :key="index" style="height: 16rpx;width: 16rpx ; "
					class="rounded-circle ml-1"
					:style="index===current?'background-color:rgba(255,255,255,1)':'background-color:rgba(255,255,255,0.5)'">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: Array,
			current: {
				type: Number,
				default: 0
			},
			show:{
				type:Boolean,
				default:true
			}
		}
	}
</script>